<template>
  <div>
    <a href="javascript:;" class="add" @click="add">
      <icon name="add" :size="56" />
    </a>
    <output>{{val}}</output>
    <a href="javascript:;" class="deduct" @click="deduct">
      <icon name="deduct" :size="56" />
    </a>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data () {
    return {
      val: this.value
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  watch: {
    val (newValue) {
      this.$emit('input', newValue)
    },
    value (newValue) {
      this.val = newValue
    }
  },
  methods: {
    add () {
      this.val += 1
      this.$nextTick(() => {
        this.$emit('change', 'add')
      })
    },
    deduct () {
      this.val -= 1
      this.$nextTick(() => {
        this.$emit('change', 'deduct')
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
